<template>
  <div id="touzi" style="width: 100%; height: 100%; pointer-events: all"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  created() {
    // this.showEcharts()
  },
  methods: {
    getData() {
      this.$get("/engineeringconstruction/getProjectInvestment").then(
        (res) => {
          this.showEcharts(res.data);
        }
      );
    },
    showEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById("touzi"));
      var option = {
        grid: {
          top: 10,
          bottom: 30
        },
        xAxis: {
          type: "category",
          axisLine:{lineStyle: {color: '#fff'}},
          data: data.map(item => item.name),
        },
        yAxis: {
          type: "value",
          axisLine:{lineStyle: {color: '#fff'}},
        },
        series: [
          {
            data: data.map(item => item.value),
            type: "line",
            smooth: true,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

